<!DOCTYPE html>
<html>

<head>
    <title>3D 正方体</title>

    <style>
        html,
        body,
        div,
        span,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p a,
        img,
        ol,
        ul,
        li {
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
        }

        #experiment {
            perspective: 800px;
            perspective-origin: 50% 50%;
            padding-top: 50px;
        }

        #cube {
            position: relative;
            margin: 100px auto;
            height: 200px;
            width: 200px;
            transform-style: preserve-3d;
        }

        .face {
            position: absolute;
            height: 160px;
            width: 160px;
            padding: 20px;
            background-color: black;

            color: white;
            font-weight: bold;
            font-size: 160px;
            line-height: 160px;
            text-align: center;


            transition: transform 1s linear;
        }

        #face1 {}

        #face2 {

            transform-origin: right;

            transform: rotateY(-90deg);
        }

        #face3 {
            transform-origin: left;
            transform: rotateY(90deg);
        }

        #face4 {
            transform-origin: top;
            transform: rotateX(-90deg);
        }

        #face5 {
            transform-origin: bottom;
            transform: rotateX(90deg);
        }

        #face6 {
            transform: translateZ(-200px);
        }

        #op {
            margin: 0 auto;
            font-size: 16px;
            font-weight: bold;
            width: 800px;
        }

        #op .range-control {
            width: 721px;
        }
    </style>

    <script type="text/javascript">
        function rotate() {
            var x = document.getElementById("rotatex").value;
            var y = document.getElementById("rotatey").value;
            var z = document.getElementById("rotatez").value;
            document.getElementById('cube').style.transform = "rotateX(" + x + "deg) rotateY(" + y +
                "deg) rotateZ(" + z + "deg)";

            document.getElementById('degx-span').innerText = x;
            document.getElementById('degy-span').innerText = y;
            document.getElementById('degz-span').innerText = z;
        }
    </script>
</head>

<body>
    <div id="experiment">
        <div id="cube">
            <div class="face" id="face1">1</div>
            <div class="face" id="face2">2</div>
            <div class="face" id="face3">3</div>
            <div class="face" id="face4">4</div>
            <div class="face" id="face5">5</div>
            <div class="face" id="face6">6</div>
        </div>
    </div>
    <div id="op">
        <p>rotate x: <span id="degx-span">0</span> deg</p>
        <input type="range" min="-360" max="360" id="rotatex" value="0" class="range-control"
            onchange="rotate()" /><br />
        <p>rotate y: <span id="degy-span">0</span> deg</p>
        <input type="range" min="-360" max="360" id="rotatey" value="0" class="range-control"
            onchange="rotate()" /><br />
        <p>rotate z: <span id="degz-span">0</span> deg</p>
        <input type="range" min="-360" max="360" id="rotatez" value="0" class="range-control"
            onchange="rotate()" /><br />
    </div>
</body>

</html>